<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>矩阵</title>
</head>

<body>
  <div>
    <h3>通过gl-matrix库获取平移、缩放的矩阵</h3>

  </div>
  <script type="module">
    import * as glMatrix from './gl-matrix-master/dist/esm/index.js'

    // 创建一个平移矩阵(沿着x、y、z轴分别平移1、2、3)
    //1   0   0    1
    //0   1   0    2
    //0   0   1    3
    //0   0   0    1
    //把矩阵按照列依次写入作为参数
    // const mat4T = glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 2, 3, 1);

    //创建一个缩放矩阵(x、y、z分别缩放1、2、3) 
    //1   0   0    0
    //0   2   0    0
    //0   0   3    0
    //0   0   0    1
    //把矩阵按照列依次写入作为参数
    // const mat4S = glMatrix.mat4.fromValues(1, 0, 0, 0, 0, 2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1);

    // 创建的矩阵其实就是用JavaScript的类型化数组表示的
    // console.log('mat4T', mat4T);
    // console.log('mat4S', mat4S);


    // const mat4 = glMatrix.mat4.create();//单位矩阵
    // console.log('mat4 ', mat4);

    // // 创建一个平移矩阵(沿着x平移2)
    // const mat4T = glMatrix.mat4.create();
    // glMatrix.mat4.translate(mat4T, mat4, [2, 0, 0]);
    // console.log('mat4T', mat4T);


    // // 创建一个缩放矩阵(x缩放10) 
    // const mat4S = glMatrix.mat4.create();
    // glMatrix.mat4.scale(mat4S, mat4, [10, 1, 1]);
    // console.log('mat4S', mat4S)

    // 生成一个旋转矩阵(绕z轴旋转45度) 
    // const mat4X = glMatrix.mat4.create();
    // glMatrix.mat4.rotateX(mat4X, mat4, Math.PI / 4);
    // console.log('mat4X', mat4X);


    // const modelMatrix = glMatrix.mat4.create();
    // //后发生缩放变换，先乘
    // glMatrix.mat4.scale(modelMatrix, modelMatrix, [10, 1, 1]);
    // //先发生平移变换，后乘
    // glMatrix.mat4.translate(modelMatrix, modelMatrix, [2, 0, 0]);
    // console.log('modelMatrix', modelMatrix);

    const modelMatrix = glMatrix.mat4.create();
    //后发生缩放变换，先乘
    glMatrix.mat4.scale(modelMatrix, modelMatrix, [10, 1, 1]);
    //先发生平移变换，后乘
    glMatrix.mat4.translate(modelMatrix, modelMatrix, [2, 0, 0]);
    console.log('modelMatrix', modelMatrix);

    //p1表示一个顶点的坐标
    const p1 = glMatrix.vec3.fromValues(2, 0, 0);
    const p2 = glMatrix.vec3.create();//默认(0,0,0)
    console.log('p2', p2);
    //p1矩阵变换，变换后结果存储在p2
    glMatrix.vec3.transformMat4(p2, p1, modelMatrix);
    console.log('p2', p2);//Float32Array(3) [40, 0, 0]




  </script>
</body>

</html>
